<template>
  <view>
    <!-- 拍照 -->
    <view>
      <!-- #ifdef MP -->
      <camera ref="cameraRef" class="camera" :device-position="devicePosition" :flash="flash" @error="closeCamera"
        style="width: 100%; height: 100vh;">
        <view class="aiPhoto">
          <view class="album" @click="hisalbum">
            <view class="Photo">
              <image style="width: 100%; height: 100%;"
                src="https://img1.baidu.com/it/u=581686420,2773456726&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=510"
                mode=""></image>
            </view>
            <view class="tit">
              AI相册
            </view>
          </view>
          <view @click="takePhoto" class="picture">
            <view class="Inside">
            </view>
          </view>
        </view>
        <view class="uploadphoto">
          <view class="upbutton" @click="uploadphoto">
            上传图片
          </view>
        </view>
        <!-- 摄像头闪光灯 -->
        <view class="cameraflash">
          <view class="camera" @click="fncamera">
            <image :src="camerasrc" mode=""></image>
          </view>
          <view class="flash" @click="fnflash">
            <image :src="flashsrc" mode=""></image>
          </view>
        </view>
      </camera>
      <!-- #endif -->
    </view>
  </view>
</template>

<script setup>
  import {
    onMounted,
    reactive,
    ref
  } from 'vue'
  import {
    onShow
  } from "@dcloudio/uni-app"
  // 上传图片地址
  const imgurl = ref('')
  // 拍照
  const src = ref('')
  //加载
  const isShow =ref(false)
  const takePhoto = () => {
    console.log('拍照');
    const ctx = uni.createCameraContext();
    ctx.takePhoto({
      quality: 'high',
      success: (res) => {
        src.value = res.tempImagePath
        let pic = src.value
        uni.navigateTo({
          url: '/pages/avatarDetail/avatarDetail?pic=' + pic + '&picUrl=null'
        })
      }
    })
  }

  //关闭相机
  const closeCamera = (res) => {
    console.log("相机关闭", res);
    uni.getSetting({
      success: (res1) => {
        console.log("重新获取授权", res1)
        if (!res1.authSetting['scope.camera']) {
          uni.authorize({
            scope: 'scope.camera',
            success() {
              uni.showToast({
                title: '可以使用相机权限',
                icon: 'success'
              });
            },
            fail(err) {
              uni.showToast({
                title: '拒绝授权',
                icon: 'none'
              });
              uni.showModal({
                title: '是否重新授权相机权限',
                success(res2) {
                  if (res2.confirm) {
                    uni.openSetting({
                      success() {
                        console.log('开启权限成功');
                        uni.reLaunch({
                          url: "../../../index/components/photograph/photograph"
                        })
                      },
                      fail() {
                        console.log('开启权限失败');
                      }
                    });
                  } else if (res2.cancel) {
                    console.log('拒绝开启开启权限');
                  }
                }
              });
            }
          });
        } else {
          uni.showToast({
            title: '已经授权系统相机权限'
          });
        }
      }
    })
  }

  // 上传头像
  const uploadphoto = () => {
    console.log('上传图片');
    uni.navigateTo({
      url: '/pages/selectPhoto/selectPhoto'
    })
  }
  // AI相册
  const hisalbum = () => {
    console.log('AI相册');
    uni.navigateTo({
      url: '/pages/my/cropLog'
    })
  }
  // 闪光灯
  const flash = ref('off')
  const flashsrc = ref('../../../../static/photograph/closeflash.png')
  const fnflash = () => {
    console.log('前置关灯', flash.value);
    if (flash.value == 'off') {
      flash.value = 'on'
      flashsrc.value = '../../../../static/photograph/openflash.png'
    } else if (flash.value == 'on') {
      flash.value = 'off'
      flashsrc.value = '../../../../static/photograph/closeflash.png'
    }
    console.log('后置关灯', flash.value);
  }
  // 翻转摄像头
  const devicePosition = ref('back')
  const camerasrc = ref('../../../../static/photograph/rearcamera.png')
  const fncamera = () => {
    console.log('翻转摄像头');
    if (devicePosition.value == 'back') {
      devicePosition.value = 'front'
      camerasrc.value = '../../../../static/photograph/frontcamera.png'
    } else if (devicePosition.value == 'front') {
      devicePosition.value = 'back'
      camerasrc.value = '../../../../static/photograph/rearcamera.png'
    }
  }

  // onMounted(() => {
  //   // #ifdef H5
  //   uni.chooseImage({
  //     sourceType: ['camera '], //从相册选择
  //     success: function(res) {
  //       src.value = res.tempFilePaths[0]
  //       let pic = src.value
  //       uni.navigateTo({
  //         url: '/pages/avatarDetail/avatarDetail?pic=' + pic + '&picUrl=null'
  //       })
  //     }
  //   });
  //   // #endif
  // })
  onShow(() => {
    // #ifdef H5
    uni.chooseImage({
      sourceType: ['camera '],
      success: function(res) {
        src.value = res.tempFilePaths[0]
        let pic = src.value
        uni.navigateTo({
          url: '/pages/avatarDetail/avatarDetail?pic=' + pic + '&picUrl=null'
        })
      }
    });
    // #endif
  })
</script>

<style lang="scss" scoped>
  .camera {
    position: relative;

    .aiPhoto {
      position: absolute;
      top: 65%;
      left: 15%;
      display: flex;

      .album {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .Photo {
          width: 110rpx;
          height: 110rpx;

          image {
            border-radius: 25rpx;
          }
        }

        .tit {
          font-size: 22rpx;
          color: #fff;
        }
      }

      .picture {
        width: 110rpx;
        height: 110rpx;
        border-radius: 50%;
        padding: 20rpx;
        border: 2rpx solid #fff;
        position: relative;
        margin-left: 100rpx;

        .Inside {
          width: 90rpx;
          height: 90rpx;
          background-color: #fff;
          border-radius: 50%;
          padding: 20rpx;
          position: absolute;
          top: 8rpx;
          left: 8rpx;
        }
      }
    }

    .uploadphoto {
      .upbutton {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 200rpx;
        height: 60rpx;
        background-color: #fff;
        border-radius: 50rpx;
        position: absolute;
        top: 78%;
        left: 37%;
      }
    }

    .cameraflash {
      position: absolute;
      top: 15%;
      left: 89%;

      .camera,
      .flash {
        width: 60rpx;
        height: 60rpx;
        margin-bottom: 30rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }

      // .flash{
      // 	width: 60rpx;
      // 	height: 60rpx;
      // 	background-color: darkred;
      // }
    }
  }
</style>